<template>
  <div>
    <div class="second-area" v-for="secondType in secondProducts">
      <div class="title">{{secondType.type}}<span v-if="secondType.itemBeanLis.length ==3" @click="goSecondPage(secondType.typeId,secondType.type,cateId)">更多</span></div>
          <div class="content" v-for="producs in secondType.itemBeanLis">
              <div class="img-area">
                <img :src="producs.imgPro">
              </div>
              <div class="content-area" @click="goDetail(producs)">
                <div class="name">[{{producs.oldLevelStr}}] {{producs.name}}</div>
                <div class="lease"><i>￥</i><span class="lease-display">{{ producs.leaseType == "DAILY" ? (producs.displayRent/100).toFixed(2) : (producs.displayRent*30/100).toFixed(2)}}</span><span>/{{producs.leaseType == "DAILY" ? "天" : "月"}} 起</span></div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getDataByFirstCategory} from "@/api/homepage.js"
export default {
  name: 'secondCategory',
  data () {
    return {
      "secondProducts": [],
      "cateId": this.$route.params.id
    }
  },
  methods: {
    goSecondPage: function(id,name,cateid){
      this.$router.push({name:'secondDetail' , params: {'id': id, 'name': name, 'cateid': cateid}});
    },
    getData: function(){
      getDataByFirstCategory(this.$route.params.id).then( data => {
        if(data.code == 200){
          this.secondProducts = data.data;
          this.redoBody(this.secondProducts);
          this.$store.commit('changeTabChange',this.$route.params.id);
          if(this.canUpdate == "update"){
            this.$store.commit('changeCanHomeResize',true);
          }
        }else{
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }    
      })
    },
    redoBody: function(data){
      if(data && data.length > 0){
        for(var i=0;i<data.length;i++){
            for(var j=0;j<data[i].itemBeanLis.length;j++){
                data[i].itemBeanLis[j].imgPro = data[i].itemBeanLis[j].imgUrl[0].url;
            }
        }
      }
    },
    goDetail: function(i){
      this.$router.push({name:'choose' , params: {'id': i.id}});
    }
  },
  mounted: function(){
   this.getData();
  },
  watch: {
    '$route': function(){
      this.getData();
      // this.$forceUpdate();
    },
    'canUpdate': function(){
      if(this.canUpdate == "update"){
        this.getData();
      }
    }
  },
  computed: {
    canUpdate(){
        return this.$store.getters.getCateUpdate;
    }
  }
}
</script>

<style lang="scss" scoped>
 .second-area {
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 12px;
    & .title {
      width: 100%;
      height: 66px;
      line-height: 66px;
      text-align: center;
      font-size: 16px;
      color: #333;
      &>span {
        float: right;
        font-size: 13px;
        color: #666;
      }
    }
    & .content {
      border: 1px solid #ECECEC;
      border-radius: 5px;
      margin-bottom: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 12px;
      & .img-area {
        width: 88px;
        height: 88px;
        background: #eee;
        margin-right: 11px;
        &>img {
          width: 100%;
          height: 100%;
        }
      }
      & .content-area {
        width: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        & .name {
          width: 200px;
          color: #666;
          font-size: 16px;
          line-height: 18px;
          display:block;
          white-space:nowrap;
          overflow:hidden; 
          text-overflow:ellipsis

        }
        & .lease {
          margin-top: 8px;
          color: #ff4000;
          line-height: 15px;
          font-size: 13px;
          & .lease-display {
            font-size: 13px;
          }
        }
      }
    }
  }
</style>